/**
 * Created by Administrator on 2018-08-14.
 * 资源利用率分析
 */
define(function (require,exports,module) {
    var sTpl = require("./resUseRatio.html");
    require("./resUseRatio.css");
    require("../../../lib/echarts.min.js");
    var VueComponent = Vue.extend({
        template: sTpl,
        data:function () {
            var dateList = [
                '2017-1-1',
                '2017-1-2',
                '2017-1-3',
                '2017-1-4',
                '2017-1-5',
                '2017-1-6',
                '2017-1-7',
                '2017-1-8',
                '2017-1-9',
                '2017-1-10',
                '2017-1-11',
                '2017-1-12',
                '2017-1-13',
                '2017-1-14',
                '2017-1-15',
                '2017-1-16',
                '2017-1-17',
                '2017-1-18',
                '2017-1-19',
                '2017-1-20',
                '2017-1-21',
                '2017-1-22',
                '2017-1-23',
                '2017-1-24',
                '2017-1-25',
                '2017-1-26',
                '2017-1-27',
                '2017-1-28',
                '2017-1-29',
                '2017-1-30',
                '2017-1-31'
            ];

            var heatmapData = [];
            var lunarData = [];
            for (var i = 0; i < dateList.length; i++) {
                heatmapData.push([
                    dateList[i],
                    Math.random() * 100
                ]);
                lunarData.push([
                    dateList[i],
                    1
                ]);
            }

            return {
                Tops:[{
                    name:'加油车',
                    useRatio:'98%'

                },
                    {
                        name:'加水车',
                        useRatio:'95%'

                    },
                    {
                        name:'装卸货车',
                        useRatio:'90%'
                    }
                ],
                lunarData:lunarData,
                heatmapData:heatmapData
            }
        },
        methods: {

            /*加油车利用率分析*/
            refuelingVehicleUr: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('refuelingVehicleUr'))
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '加油车利用率分析',
                        x:'center',
                        textStyle:{
                            color:'#00FFFF',
                            fontSize:'14',
                        }
                    },
                    tooltip: {
                        formatter: function (params) {
                            return '利用率: ' + params.value[1].toFixed(1)+'%';
                        }
                    },

                    visualMap: {
                        show: false,
                        min: 0,
                        max: 100,
                        calculable: true,
                        seriesIndex: [2],
                        orient: 'horizontal',
                        left: 'center',
                        bottom: 0,
                        inRange: {
                            color: ['#79ff6c','#ff0f02'],
                            opacity: 1
                        },
                        controller: {
                            inRange: {
                                opacity: 0.5
                            }
                        }
                    },

                    calendar: [{
                        left: 'center',
                        top: 'middle',
                        cellSize: [40, 40],
                        yearLabel: {show: false},
                        orient: 'vertical',
                        dayLabel: {
                            firstDay: 1,
                            nameMap: 'cn',
                            color:'#00FFFF'
                        },
                        monthLabel: {
                            show: true,
                            nameMap: 'cn',
                            color:'#00FFFF'
                        },
                        range: '2017-01'
                    }],

                    series: [{
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        symbolSize: 1,
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    var d = echarts.number.parseDate(params.value[0]);
                                    return d.getDate();
                                },
                                textStyle: {
                                    color: '#000'
                                }
                            }
                        },
                        data: this.lunarData
                    }, {
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        symbolSize: 1,
                        data: this.lunarData
                    }, {
                        name: '利用率',
                        type: 'heatmap',
                        coordinateSystem: 'calendar',
                        data: this.heatmapData
                    }]
                });
            },
            /*-------------------------------------------------------------------------------------------------------*/
            /*加水车利用率分析*/
            waterVehicleUr: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('waterVehicleUr'))
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '加水车利用率分析',
                        x:'center',
                        textStyle:{
                            color:'#00FFFF',
                            fontSize:'14',
                        }
                    },
                    tooltip: {
                        formatter: function (params) {
                            return '利用率: ' + params.value[1].toFixed(1)+'%';
                        }
                    },

                    visualMap: {
                        show: false,
                        min: 0,
                        max: 100,
                        calculable: true,
                        seriesIndex: [2],
                        orient: 'horizontal',
                        left: 'center',
                        bottom: 0,
                        inRange: {
                            color: ['#79ff6c','#ff0f02'],
                            opacity: 1
                        },
                        controller: {
                            inRange: {
                                opacity: 0.5
                            }
                        }
                    },

                    calendar: [{
                        left: 'center',
                        top: 'middle',
                        cellSize: [40, 40],
                        yearLabel: {show: false},
                        orient: 'vertical',
                        dayLabel: {
                            firstDay: 1,
                            nameMap: 'cn',
                            color:'#00FFFF'
                        },
                        monthLabel: {
                            show: true,
                            nameMap: 'cn',
                            color:'#00FFFF'
                        },
                        range: '2017-01'
                    }],

                    series: [{
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        symbolSize: 1,
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    var d = echarts.number.parseDate(params.value[0]);
                                    return d.getDate();
                                },
                                textStyle: {
                                    color: '#000'
                                }
                            }
                        },
                        data: this.lunarData
                    }, {
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        symbolSize: 1,
                        data: this.lunarData
                    }, {
                        name: '利用率',
                        type: 'heatmap',
                        coordinateSystem: 'calendar',
                        data: this.heatmapData
                    }]
                });
            },
            /*-------------------------------------------------------------------------------------------------------*/
            /*装卸货车利用率分析*/
            argocVehicleUr: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('argocVehicleUr'))
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '装卸货车利用率分析',
                        x:'center',
                        textStyle:{
                            color:'#00FFFF',
                            fontSize:'14',
                        }
                    },
                    tooltip: {
                        formatter: function (params) {
                            return '利用率: ' + params.value[1].toFixed(1)+'%';
                        }
                    },

                    visualMap: {
                        show: false,
                        min: 0,
                        max: 100,
                        calculable: true,
                        seriesIndex: [2],
                        orient: 'horizontal',
                        left: 'center',
                        bottom: 0,
                        inRange: {
                            color: ['#79ff6c','#ff0f02'],
                            opacity: 1
                        },
                        controller: {
                            inRange: {
                                opacity: 0.5
                            }
                        }
                    },

                    calendar: [{
                        left: 'center',
                        top: 'middle',
                        cellSize: [40, 40],
                        yearLabel: {show: false},
                        orient: 'vertical',
                        dayLabel: {
                            firstDay: 1,
                            nameMap: 'cn',
                            color:'#00FFFF'
                        },
                        monthLabel: {
                            show: true,
                            nameMap: 'cn',
                            color:'#00FFFF'
                        },
                        range: '2017-01'
                    }],

                    series: [{
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        symbolSize: 1,
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    var d = echarts.number.parseDate(params.value[0]);
                                    return d.getDate();
                                },
                                textStyle: {
                                    color: '#000'
                                }
                            }
                        },
                        data: this.lunarData
                    }, {
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        symbolSize: 1,
                        data: this.lunarData
                    }, {
                        name: '利用率',
                        type: 'heatmap',
                        coordinateSystem: 'calendar',
                        data: this.heatmapData
                    }]
                });
            }




        },
        mounted:function() {
            this.$nextTick(function () {
                this.refuelingVehicleUr();
                this.waterVehicleUr();
                this.argocVehicleUr();
            }.bind(this));

        },
        watch:{
        },
        computed:{

        },
        activated:function () {
            messages.$emit('change','资源利用率分析');
        }
    })
    module.exports=VueComponent;
    module.exports.reDefine=function (val) {
        module.exports.type=val;
        return module.exports;
    }

})


